<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LayerSlider previous version 3D demo slider</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../documentation/assets/css/doc.css">
	<link rel="stylesheet" href="../documentation/assets/css/font.css">
	<link href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
	<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
	<!--[if lt IE 9]>
		<script src="../documentation/assets/js/html5.js"></script>
	<![endif]-->

	<!-- LayerSlider stylesheet -->
	<link rel="stylesheet" href="../layerslider/css/layerslider.css" type="text/css">
	<!-- External libraries: jQuery & GreenSock -->
	<script src="../layerslider/js/jquery.js" type="text/javascript"></script>
	<script src="../layerslider/js/greensock.js" type="text/javascript"></script>
	<!-- LayerSlider script files -->
	<script src="../layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
	<script src="../layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>

	<style>

		/*
			You can add your custom layer styles
			in the style attribute of the layer,
			to a style element or
			to an external css file
		*/

		#layerslider * {
			font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}

	</style>

</head>
<body class="nobg">
	<div id="slider-wrapper">
		<div id="layerslider" class="ls-wp-container" style="width:1000px;height:500px;max-width:1280px;">
			<div class="ls-slide" data-ls="slidedelay:7200;transition2d:all;transition3d:15;">
				<img src="sliderimages/abyss-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:186px;left:701px;white-space: nowrap;" data-ls="offsetxin:right;durationin:50;easingin:linear;fadein:false;offsetxout:left;durationout:11000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-far.png" alt="Fish"><img class="ls-l" style="top:251px;left:857px;white-space: nowrap;" data-ls="offsetxin:right;durationin:50;easingin:linear;fadein:false;offsetxout:left;durationout:9000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-far.png" alt="Fish"><img class="ls-l" style="top:131px;left:358px;white-space: nowrap;" data-ls="offsetxin:right;durationin:3000;delayin:1000;easingin:linear;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-mid.png" alt="Fishes"><img class="ls-l" style="top:196px;left:255px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:1000;easingin:linear;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-mid.png" alt="Fishes"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;durationin:0;easingin:linear;offsetxout:0;durationout:0;easingout:linear;" src="sliderimages/abyss-bg-mask.png" alt="Abyss">
				<h1 class="ls-l" style="top:30%;left:50%;text-shadow: 0px 0px 20px white; font-weight: normal;font-size:50px;color:white;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;offsetxout:0;durationout:2500;showuntil:1;">LayerSlider</h1>
				<h1 class="ls-l" style="top:50%;left:50%;text-shadow: 0px 0px 20px white; font-weight: normal;font-size:120px;color:white;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:500;offsetxout:0;durationout:2500;showuntil:1;">3D</h1>
				<h1 class="ls-l" style="top:70%;left:50%;text-shadow: 0px 0px 20px white; font-weight: normal;font-size:50px;color:white;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1200;offsetxout:0;durationout:2500;showuntil:1;">demo slider</h1>
				<img class="ls-l" style="top:20px;left:1000px;white-space: nowrap;" data-ls="offsetxin:left;durationin:6500;easingin:linear;fadein:false;offsetxout:right;durationout:0;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/shark.png" alt="Shark"><img class="ls-l" style="top:218px;left:481px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:2000;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:4000;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-far.png" alt="Fish"><img class="ls-l" style="top:286px;left:646px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:3000;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:3000;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-far.png" alt="Fish"><img class="ls-l" style="top:315px;left:325px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:2500;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:4000;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-mid.png" alt="Fish"><img class="ls-l" style="top:143px;left:695px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:3500;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:2500;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-close.png" alt="Fish"><img class="ls-l" style="top:84px;left:458px;white-space: nowrap;" data-ls="offsetxin:right;durationin:3000;delayin:2800;easingin:linear;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/small-fish-mid.png" alt="Fish"><img class="ls-l" style="top:272px;left:685px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:3000;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:3000;showuntil:1;fadeout:false;" src="sliderimages/med-fish-mid.png" alt="Fish"><img class="ls-l" style="top:70px;left:244px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:5300;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:2000;easingout:easeInExpo;fadeout:false;" src="sliderimages/med-fish-mid.png" alt="Fish"><img class="ls-l" style="top:200px;left:196px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:4000;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:3000;showuntil:1;fadeout:false;" src="sliderimages/med-fish-mid.png" alt="Fish"><img class="ls-l" style="top:246px;left:339px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2400;delayin:5500;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:2000;easingout:easeInExpo;fadeout:false;" src="sliderimages/med-fish-close.png" alt="Fish"><img class="ls-l" style="top:12px;left:344px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:3300;easingin:easeOutCirc;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:easeInOutExpo;fadeout:false;" src="sliderimages/big-fish-close.png" alt="Fish"><img class="ls-l" style="top:194px;left:454px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:6000;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:1700;easingout:easeInExpo;fadeout:false;" src="sliderimages/big-fish-close.png" alt="Fish">
			</div>
			<div class="ls-slide" data-ls="slidedelay:4500;transition2d:all;transition3d:36;timeshift:-1000;">
				<img src="sliderimages/3d-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:20px;left:106px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:1;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:153px;left:342px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:50;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:700;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:276px;left:252px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:100;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:400;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:199px;left:585px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:50;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:950;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:37px;left:525px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:250;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:116px;left:86px;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:1500;offsetxout:0;durationout:1500;" src="sliderimages/sayhello.png" alt="Say hello"><img class="ls-l" style="top:190px;left:135px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:50;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:100;easingout:easeInBack;fadeout:false;" src="sliderimages/mid-cube-blur.png" alt="Cube"><img class="ls-l" style="top:340px;left:322px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:150;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:500;easingout:easeInBack;fadeout:false;" src="sliderimages/mid-cube-blur.png" alt="Cube"><img class="ls-l" style="top:398px;left:587px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:100;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:300;easingout:easeInBack;fadeout:false;" src="sliderimages/mid-cube-blur.png" alt="Cube"><img class="ls-l" style="top:211px;left:16px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:100;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:300;easingout:easeInBack;fadeout:false;" src="sliderimages/big-cube.png" alt="Cube"><img class="ls-l" style="top:251px;left:746px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:200;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:50;easingout:easeInBack;fadeout:false;" src="sliderimages/big-cube.png" alt="Cube">
			</div>
			<div class="ls-slide" data-ls="slidedelay:5600;transition2d:all;transition3d:58,74;">
				<img src="sliderimages/autumn-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:2500;offsetxout:0;durationout:1500;" src="sliderimages/summer-bg.jpg" alt="Spring"><img class="ls-l" style="top:9px;left:101px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-1.png" alt="Autumn Leaf"><img class="ls-l" style="top:210px;left:240px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:200;easingin:easeOutQuint;fadein:false;rotatein:-360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-2.png" alt="Autumn Leaf"><img class="ls-l" style="top:193px;left:480px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:400;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-3.png" alt="Autumn Leaf"><img class="ls-l" style="top:311px;left:623px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:600;easingin:easeOutQuint;fadein:false;rotatein:-360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-4.png" alt="Autumn Leaf"><img class="ls-l" style="top:407px;left:371px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:800;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-5.png" alt="Autumn Leaf"><img class="ls-l" style="top:232px;left:392px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:1000;easingin:easeOutQuint;fadein:false;rotatein:-360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-6.png" alt="Autumn Leaf"><img class="ls-l" style="top:190px;left:67px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:1200;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-7.png" alt="Autumn Leaf"><img class="ls-l" style="top:9px;left:101px;white-space: nowrap;" data-ls="offsetxin:0;delayin:2500;offsetxout:0;durationout:1500;" src="sliderimages/s-l-1.png" alt="Spring Leaf"><img class="ls-l" style="top:210px;left:240px;white-space: nowrap;" data-ls="offsetxin:0;delayin:2700;offsetxout:0;durationout:1500;" src="sliderimages/s-l-2.png" alt="Spring Leaf"><img class="ls-l" style="top:193px;left:480px;white-space: nowrap;" data-ls="offsetxin:0;delayin:2900;offsetxout:0;durationout:1500;" src="sliderimages/s-l-3.png" alt="Spring Leaf"><img class="ls-l" style="top:311px;left:623px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3100;offsetxout:0;durationout:1500;" src="sliderimages/s-l-4.png" alt="Spring Leaf"><img class="ls-l" style="top:407px;left:371px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3300;offsetxout:0;durationout:1500;" src="sliderimages/s-l-5.png" alt="Spring Leaf"><img class="ls-l" style="top:232px;left:392px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3500;offsetxout:0;durationout:1500;" src="sliderimages/s-l-6.png" alt="Spring Leaf"><img class="ls-l" style="top:190px;left:67px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3700;offsetxout:0;durationout:1500;" src="sliderimages/s-l-7.png" alt="Spring Leaf">
				<p class="ls-l" style="top:83px;left:277px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:left;delayin:1000;fadein:false;offsetxout:left;durationout:1500;showuntil:2000;fadeout:false;">
					The improve
				</p>
				<p class="ls-l" style="top:62px;left:451px;text-shadow: 0px 0px 10px white;font-size:60px;color:white;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2000;delayin:1500;easingin:easeOutElastic;fadein:false;offsetxout:0;offsetyout:top;durationout:1500;showuntil:500;fadeout:false;">
					is
				</p>
				<p class="ls-l" style="top:83px;left:503px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:right;delayin:1000;fadein:false;offsetxout:right;durationout:1500;showuntil:2000;fadeout:false;">
					to change.
				</p>
				<p class="ls-l" style="top:137px;left:367px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:left;delayin:1750;fadein:false;offsetxout:left;durationout:1500;showuntil:1500;fadeout:false;">
					To be perfect
				</p>
				<p class="ls-l" style="top:116px;left:555px;text-shadow: 0px 0px 10px white;font-size:60px;color:white;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:1500;delayin:2250;easingin:easeOutElastic;fadein:false;offsetxout:0;offsetyout:bottom;durationout:1500;showuntil:500;fadeout:false;">
					is
				</p>
				<p class="ls-l" style="top:137px;left:608px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:right;delayin:1750;fadein:false;offsetxout:right;durationout:1500;showuntil:1500;fadeout:false;">
					to change often.
				</p>
				<p class="ls-l" style="top:198px;left:722px;text-shadow: 0px 0px 10px white; font-style: italic;font-size:20px;color:white;white-space: nowrap;" data-ls="offsetxin:0;delayin:2500;offsetxout:0;durationout:1500;showuntil:1000;">
					- Winston Churchill
				</p>
			</div>
			<div class="ls-slide" data-ls="slidedelay:10050;transition2d:all;transition3d:68,69,77,78;">
				<img src="sliderimages/cubes-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;easingin:easeInOutQuad;offsetxout:0;durationout:1000;easingout:easeInOutQuad;" src="sliderimages/cubes-blur.jpg" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2500;delayin:500;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5700;fadeout:false;" src="sliderimages/tile-1.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2500;delayin:600;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5100;fadeout:false;" src="sliderimages/tile-2.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2500;delayin:700;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5200;fadeout:false;" src="sliderimages/tile-3.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:left;durationin:2500;delayin:800;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5500;fadeout:false;" src="sliderimages/tile-4.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2500;delayin:900;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5500;fadeout:false;" src="sliderimages/tile-5.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2500;delayin:1000;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:4600;fadeout:false;" src="sliderimages/tile-6.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2500;delayin:1100;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5100;fadeout:false;" src="sliderimages/tile-7.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:left;durationin:2500;delayin:1200;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:4800;fadeout:false;" src="sliderimages/tile-8.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2500;delayin:1300;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:4500;fadeout:false;" src="sliderimages/tile-9.png" alt="Tile">
				<p class="ls-l" style="top:45px;left:30px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;delayin:1500;easingin:easeOutExpo;fadein:false;rotatein:-120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
					200+ 2D &amp; 3D transitions with Transition Builder!
				</p>
				<p class="ls-l" style="top:360px;left:450px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;delayin:3000;easingin:easeOutExpo;fadein:true;rotatein:-120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
					Use with any HTML content including embedded videos!
				</p>
				<p class="ls-l" style="top:100px;left:505px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:right;delayin:4500;easingin:easeOutExpo;fadein:false;rotatein:120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
					Responsive with Smart Resize &amp; Touch-enabled!
				</p>
				<p class="ls-l" style="top:400px;left:10px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:left;delayin:6000;easingin:easeOutExpo;fadein:false;rotatein:120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
					Multisite, Multi-language &amp; Localization ready!
				</p>
			</div>
			<div class="ls-slide" data-ls="slidedelay:6000;transition2d:all;transition3d:45,46,47,48,49,50;">
				<img src="sliderimages/bbb-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:-90px;left:500px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1000;easingin:easeInOutQuad;offsetxout:left;durationout:50000;showuntil:1;easingout:easeInQuad;fadeout:false;" src="sliderimages/bbb-clouds-far.png" alt="Clouds"><img class="ls-l" style="top:-60px;left:1000px;white-space: nowrap;" data-ls="offsetxin:right;durationin:0;delayin:10000;easingin:linear;fadein:false;offsetxout:left;durationout:40000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bbb-clouds-close.png" alt="Clouds"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:0;delayin:1000;easingin:linear;fadein:false;offsetxout:0;durationout:1500;easingout:linear;" src="sliderimages/bbb-bg-mask.png" alt="Mask">
				<div class="ls-l" style="top:154px;left:465px;box-shadow: 0px 5px 35px -2px black;width:510px;height:291px;background:white;border-radius:2px;white-space: nowrap;" data-ls="offsetxin:right;durationin:1500;easingin:easeOutBack;fadein:false;offsetxout:0;offsetyout:bottom;durationout:1500;fadeout:false;">
				</div>
				<div class="ls-l" style="top:159px;left:470px;white-space: nowrap;" data-ls="offsetxin:right;durationin:1500;easingin:easeOutBack;fadein:false;offsetxout:0;offsetyout:bottom;durationout:1500;fadeout:false;">
					<iframe src="http://player.vimeo.com/video/79287693?title=0&amp;byline=0&amp;portrait=0&amp;color=e4f000" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
					</iframe>
				</div>
				<img class="ls-l" style="top:35px;left:715px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:1500;delayin:1500;fadein:false;offsetxout:0;offsetyout:top;durationout:1500;fadeout:false;" src="sliderimages/easy.png" alt="Easy to embed"><img class="ls-l" style="top:37px;left:188px;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:5000;offsetxout:0;durationout:1500;" src="sliderimages/vfeatures.png" alt="Features"><img class="ls-l" style="top:304px;left:159px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:3000;easingin:easeOutBack;fadein:false;offsetxout:0;offsetyout:top;durationout:1500;fadeout:false;" src="sliderimages/bi-colored-butterfly-source_ijc.gif" alt="Butterfly"><img class="ls-l" style="top:119px;left:234px;white-space: nowrap;" data-ls="offsetxin:0;delayin:16000;offsetxout:0;durationout:1000;showuntil:2000;" src="sliderimages/acorn.png" alt="Acorn">
			</div>
		</div>
	</div>

	<div id="example-wrapper">
		<div id="example">
			<section>
				<h4>Previous version 3D demo slider</h4>
				<p>

				</p>
				<p>
					<a href="../documentation/documentation.html#slider-examples">back to examples</a>
				</p>
			</section>
		</div>
	</div>

	<!-- Initializing the slider -->
	<script>
		jQuery("#layerslider").layerSlider({
			pauseOnHover: false,
			skin: 'borderlessdark3d',
			hoverBottomNav: true,
			skinsPath: '../layerslider/skins/'
		});
	</script>
</body>
</html>
